<template>
  <el-input v-bind="$props" v-on="$listeners" :type="myType">
    <template v-if="lockIcon" slot="prepend">
      <i class="iconfont" v-html="lockIcon"></i>
    </template>
    <div slot="append" @click="handleEye" class="eye" style="cursor:pointer;">
      <i class="iconfont" v-html="myType=='password' ? icons[0] : icons[1]"></i>
    </div>
  </el-input>
</template>
<script>
  import { Input } from '@element-ui'
  export default {
    componentName: 'EPassword',
    components: {
      ElInput: Input
    },
    props: {
      ...Input.props,
      placeholder: {
        type: String,
        default: '请输入密码'
      },
      type: {
        type: String,
        default: 'password'
      },
      maxlength: {
        type: Number,
        default: 20
      },
      lockIcon: {
        type: String,
        default: '&#xe633;'
      },
      icons: {
        type: Array,
        default () {
          return ['&#xe60b;', '&#xe622;']
        }
      }
    },
    data () {
      return {
        myType: this.type
      }
    },
    methods: {
      handleEye () {
        this.myType = this.myType === 'password' ? 'text' : 'password'
      }
    }
  }
</script>